<template>
	<uni-calendar
	class="c_select"
	    :insert="true"
	    :lunar="true" 
	    :start-date="'2022-11-1'"
	    :end-date="'2022-11-30'"/>
		
		<view class="table">
			<text>本月累积打卡{{user.clockNum}}次</text>
			<text>累积打卡时长{{user.clockTime}}个小时</text>
			<text>超过了{{user.percentage}}的用户</text>
			<text>继续加油，你是最棒的！</text>
			<button class="btn">分享我的学习</button>
		</view>
</template>

<script setup>
	import uniCalendar from "@/uni_calendar/components/uni-calendar/uni-calendar.vue"
	import {onMounted,ref,reactive} from 'vue'
	import http from '../../utils/http.js'
	const user=reactive({
		clockNum:'',
		clockTime:'',
		percentage:''
	})
	const getId=()=>{
		uni.getStorage({
			key:'userId',
			success(res){
				console.log(res);
			  getData(res.data)
			}
		})
	}
	const getData=(id)=>{
		http({
			url:'/clock/signIn',
			params:'get',
			data:{
				userId:id?id:''
			}
		}).then((res)=>{
			console.log(res)
			user.clockNum=res.data.clockNum
			user.clockTime=res.data.clockTime
			user.percentage=res.data.percentage
		})
	}
	const kn=onMounted(()=>{
		getId()
	})
	
</script>
<style scoped>
	.c_select{
		width: 670rpx;
		padding: 0 40rpx;
	}
	.table{
		width: 670rpx;
		height: 400rpx;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #f7efe4;
		margin: 40rpx;
		display: flex;
		flex-direction: column;
	}
	.table text{
		font-size: 28rpx;
		margin: 22rpx;
	}
	.btn{
		width: 248rpx;
		height: 60rpx;
		background-color:#c6964f ;
		color: #ffffff;
		margin: 0 0 10rpx 0;
		padding: 0;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
	}
</style>
